<template>
  <basic-container>
    <avue-crud
      :option="option"
      :search.sync="search"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @sort-change="sortChange"
      @on-load="onLoad"
    >
      <template slot-scope="scope" slot="menu">
        <el-button
          size="small"
          type="text"
          @click.stop="handleReprec(scope.row, scope.index)"
          >配置接收方绑定关系</el-button
        >
      </template>
      <template slot-scope="{}" slot="rpsNoSearch">
        <select-page
          ref="searchProjectSelect"
          label="rpsName"
          value="rpsNo"
          :select.sync="search.rpsNo"
          :url="'division/division_merchant_store/pageList'"
          placeholder-text="门店"
          filter-key="searchParam"
          :params="{ rpiNo: $route.query.rpiNo }"
        ></select-page>
      </template>
      <template slot-scope="{ row }" slot="divisionMode">
        <span>{{ row.divisionModeName }}</span>
      </template>
      <template slot-scope="{ row }" slot="divisionPattern">
        <span>{{ row.divisionPatternName }}</span>
      </template>
    </avue-crud>

    <!-- 表单弹窗 -->
    <el-dialog
      class="el-dialog__wrapper avue-dialog avue-crud__dialog"
      :title="dialogText"
      :visible.sync="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handleClose"
      width="70%"
    >
      <el-form
        ref="form"
        :model="reprecForm"
        :rules="rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="结算方式" prop="divisionMode">
              <select-dict
                ref="divisionMode"
                :select.sync="reprecForm.divisionMode"
                code="division_mode"
                placeholder-text="结算方式"
                :disabledKeys="['1']"
                @change="divisionModeChange"
              ></select-dict>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="reprecForm.divisionMode">
            <el-form-item label="分账模式" prop="divisionPattern">
              <select-dict
                ref="divisionPattern"
                :select.sync="reprecForm.divisionPattern"
                code="division_pattern"
                placeholder-text="分账模式"
                :disabled="dpDisabled"
              ></select-dict>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="reprecForm.divisionPattern == 1">
            <el-button
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click.stop="handleReprecAdd"
              >新增分账方</el-button
            >
          </el-col>
        </el-row>
        <div class="alter-basic" v-if="reprecInfo.k2.length > 0">
          <div class="row-alter alter-width-4x">
            <div class="col-alter border-bottom">
              <span class="alter-title">结算对象</span>
            </div>
            <div
              class="col-alter"
              v-for="(k1Item, k1i) in reprecInfo.k1"
              :key="k1i"
            >
              {{ k1Item == 1 ? "分账方" : "接收方" }}
            </div>
          </div>
          <div class="row-alter alter-width-4x">
            <div class="col-alter border-bottom">
              <span class="alter-title">分账接收方编号</span>
            </div>
            <div
              class="col-alter"
              v-for="(k2Item, k2i) in reprecInfo.k2"
              :key="k2i"
            >
              {{ k2Item }}
            </div>
          </div>
          <div class="row-alter alter-width-4x">
            <div class="col-alter border-bottom">
              <span class="alter-title">分账接收方名称</span>
            </div>
            <div
              class="col-alter"
              v-for="(k3Item, k3i) in reprecInfo.k3"
              :key="k3i"
            >
              {{ k3Item }}
            </div>
          </div>
          <div class="row-alter alter-width-4x">
            <div class="col-alter border-bottom">
              <span class="alter-title">分账计算规则</span>
            </div>
            <div
              class="col-alter"
              v-for="(k4Item, k4i) in reprecInfo.k4"
              :key="k4i"
            >
              {{ k4Item == 1 ? "按比例分账" : k4Item == 2 ? "按金额分账" : "" }}
            </div>
          </div>
          <div class="row-alter alter-width-4x">
            <div class="col-alter border-bottom">
              <span class="alter-title">分账数值</span>
            </div>
            <div
              class="col-alter cols"
              v-for="(item, i) in reprecForm.divisionRateList"
              :key="i"
            >
              <el-form-item
                label=""
                label-width="0"
                :prop="'divisionRateList.' + i + '.value'"
                :rules="{
                  required: true,
                  message: '分账数值不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input
                  type="number"
                  oninput="if(value){value=value.replace(/[^\d]/g,1);if(Number(value)<=0){value=0}} if(Number(value)>100){value=100}"
                  size="mini"
                  class="haruyuki-width-100"
                  placeholder="请输入0-100范围的值，总和为100"
                  v-model="item.value"
                >
                  <span slot="suffix">%</span>
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="row-alter alter-width-4x">
            <div class="col-alter border-bottom">
              <span class="alter-title">是否承担手续费</span>
            </div>
            <div
              class="col-alter cols"
              v-for="(item, i) in reprecForm.isChargeList"
              :key="i"
            >
              <el-form-item
                label=""
                label-width="0"
                :prop="'isChargeList.' + i + '.value'"
                :rules="{
                  required: true,
                  message: '是否承担手续费不能为空',
                  trigger: 'blur',
                }"
              >
                <el-radio
                  v-model="item.value"
                  :label="1"
                  @input="isSelectChange($event, i)"
                  >{{ "" }}</el-radio
                >
                <!-- <select-dict
                  ref="isCharge"
                  :select.sync="item.value"
                  code="is_charge"
                  placeholder-text="是否承担手续费"
                  @change="isSelectChange"
                ></select-dict> -->
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
      <span
        slot="footer"
        class="avue-dialog__footer avue-dialog__footer--right"
      >
        <el-button
          size="small"
          type="primary"
          v-preventClick
          @click="handleSubmit"
          >确 定</el-button
        >
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      </span>
      <!-- 表单弹窗 -->
      <el-dialog
        class="el-dialog__wrapper avue-dialog avue-crud__dialog"
        :title="'分账接收方'"
        :visible.sync="dialogChildVisible"
        append-to-body
        :close-on-click-modal="false"
        :before-close="handleChildClose"
      >
        <receive-table
          ref="receiveTable"
          :project-code="reprecForm.projectCode"
        ></receive-table>
        <span
          slot="footer"
          class="avue-dialog__footer avue-dialog__footer--right"
        >
          <el-button
            size="small"
            type="primary"
            v-preventClick
            @click="handleChildSubmit"
            >确 定</el-button
          >
          <el-button size="small" @click="dialogChildVisible = false"
            >取 消</el-button
          >
        </span>
      </el-dialog>
    </el-dialog>
    <el-dialog
      title="数据导入"
      append-to-body
      :visible.sync="excelBox"
      width="555px"
    >
      <avue-form
        :option="excelOption"
        v-model="excelForm"
        :upload-after="uploadAfter"
      >
        <template slot="excelTemplate">
          <el-button type="primary" @click="handleTemplate">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-form>
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  getList,
  getDetail,
  add,
} from "@/api/rb-oem/separateMerchant/separate_merchant_store";
import { getRegion } from "@/api/system/dict";
import { mapGetters } from "vuex";
import { getToken } from "@/util/auth";
import { isMobile } from "@/util/validate";
import selectPage from "@/components/select-page/select-page";
import selectDict from "@/components/select-dict/select-dict";
import receiveTable from "./components/receive-table";

export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入联系方式"));
      } else if (!isMobile(value)) {
        callback(new Error("手机号码不正确！"));
      } else {
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      isShowPwd: true,
      isShowMap: true,
      form: {
        rpsNo: "",
        rpsName: "",
        contactName: "",
        contactPhone: "",
        divisionMode: "",
        divisionPattern: "",
        address: "",
        province: "",
        city: "",
        area: "",
        email: "",
      },
      query: {},
      search: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "calc(50vh - 50px)",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        viewBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: true,
        searchMenuSpan: 6,
        columnBtn: false,
        menuWidth: "150",
        column: [
          {
            label: "门店编号",
            searchLabel: "门店名称",
            prop: "rpsNo",
            search: true,
            display: false,
            overHidden: true,
            minWidth: 120,
          },
          {
            label: "门店名称",
            prop: "rpsName",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入门店名称",
                trigger: "blur",
              },
            ],
            overHidden: true,
            minWidth: 180,
          },
          {
            label: "负责人",
            prop: "contactName",
            search: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入负责人",
                trigger: "blur",
              },
            ],
            overHidden: true,
            minWidth: 120,
          },
          {
            label: "联系方式",
            prop: "contactPhone",
            search: true,
            rules: [
              {
                required: true,
                validator: validatePhone,
                trigger: "blur",
              },
            ],
            overHidden: true,
            minWidth: 120,
          },
          {
            label: "结算方式",
            prop: "divisionMode",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=division_mode",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            rules: [
              {
                required: true,
                message: "请选择结算方式",
                trigger: "change",
              },
            ],
            overHidden: true,
            minWidth: 120,
          },
          {
            label: "分账模式",
            prop: "divisionPattern",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=division_pattern",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            rules: [
              {
                required: true,
                message: "请选择分账模式",
                trigger: "change",
              },
            ],
            overHidden: true,
            minWidth: 120,
          },
          {
            label: "创建日期",
            prop: "createTime",
            type: "input",
            overHidden: true,
            width: 140,
          },
          {
            label: "创建日期",
            prop: "timeData",
            type: "datetimerange",
            searchRange: true,
            defaultTime: ["00:00:00", "23:59:59"],
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            startPlaceholder: "开始时间",
            endPlaceholder: "截至时间",
            search: true,
            rules: [
              {
                required: true,
                message: "请选择创建日期",
                trigger: "blur",
              },
            ],
            hide: true,
            display: false,
          },
        ],
      },
      data: [],
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "模板上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "模板上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/rb-oem/oem/posStore/pos_store/import",
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
      },
      dialogVisible: false,
      dialogType: "",
      dialogText: "配置分账接收方绑定关系",
      reprecForm: {
        rpsNo: "",
        projectCode: "",
        divisionMode: "",
        divisionPattern: "",
        divisionRateList: [],
        isChargeList: [],
        bindList: [],
      },
      rules: {
        divisionMode: [
          { required: true, message: "请选择结算方式", trigger: "change" },
        ],
        divisionPattern: [
          { required: true, message: "请选择分账模式", trigger: "change" },
        ],
        divisionRule: [
          { required: true, message: "请选择分账规则", trigger: "change" },
        ],
      },
      dpDisabled: false,
      reprecInfo: {
        data: {},
        k1: [],
        k2: [],
        k3: [],
        k4: [],
      },
      dialogChildVisible: false,
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.pos_store_add, false),
        viewBtn: this.vaildData(this.permission.pos_store_view, false),
        delBtn: this.vaildData(this.permission.pos_store_delete, false),
        editBtn: this.vaildData(this.permission.pos_store_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  watch: {
    "search.timeData"(val) {
      if (val) {
        this.search.beginProduceTime = val[0];
        this.search.endProduceTime = val[1];
      } else {
        this.search.endProduceTime = "";
        this.search.beginProduceTime = "";
      }
    },
  },
  components: {
    selectPage,
    selectDict,
    receiveTable,
  },
  created() {},
  methods: {
    async lazyLoad(node, resolve) {
      let stop_level = 2;
      let level = node.level;
      let data = node.data || {};
      let code = data.code;
      let list = [];
      let callback = () => {
        resolve(
          (list || []).map((ele) => {
            return Object.assign(ele, {
              leaf: level >= stop_level,
            });
          })
        );
      };
      if (level == 0) {
        await getRegion(code).then(
          (res) => {
            list = res.data.data;
            callback();
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else if (level == 1) {
        await getRegion(code).then(
          (res) => {
            list = res.data.data;
            callback();
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else if (level == 2) {
        await getRegion(code).then(
          (res) => {
            list = res.data.data;
            callback();
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else {
        callback();
      }
    },
    rowSave(row, done, loading) {
      row.rpiNo = this.$route.query.rpiNo;
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, { rpiNo: this.$route.query.rpiNo }, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    handleImport() {
      this.excelBox = true;
    },
    handleExport() {
      let exQuery = ``;
      exQuery += `&userNo=${this.search.userNo}`;
      exQuery += `&rpiNo=${this.search.rpiNo}`;
      exQuery += `&rpsName=${this.search.rpsName}`;
      exQuery += `&rpsNo=${this.search.rpsNo}`;
      exQuery += `&province=${this.search.province}`;
      exQuery += `&city=${this.search.city}`;
      exQuery += `&area=${this.search.area}`;
      this.$confirm("是否导出用户数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(
          `/api/rb-oem/oem/posStore/pos_store/export?${
            this.website.tokenHeader
          }=${getToken()}` + exQuery
        );
      });
    },
    handleTemplate() {
      window.open(
        `/api/rb-oem/oem/posStore/pos_store/export-template?${
          this.website.tokenHeader
        }=${getToken()}`
      );
    },
    uploadAfter(res, done) {
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    sortChange(val) {
      if (val.order == "ascending") {
        //正序
        this.query.ascs = val.prop;
        this.query.descs = "";
      } else {
        //倒序
        this.query.descs = val.prop;
        this.query.ascs = "";
      }
      this.refreshChange();
    },
    handleReprec(row, i) {
      this.reprecInfo = {
        data: row,
        k1: [],
        k2: [],
        k3: [],
        k4: [],
      };
      if (row.isBind == 1) {
        this.dialogType = "edit";
        getDetail(row.rpsNo).then((res) => {
          if (res.data.success) {
            this.reprecForm.projectCode = row.projectCode;
            this.reprecForm.rpsNo = res.data.data.rpsNo;
            this.reprecForm.divisionMode = res.data.data.divisionMode + "";
            this.reprecForm.divisionPattern = res.data.data.divisionPattern + "";
            this.dpDisabled = true;
            for (const item of res.data.data.bindList) {
              this.reprecInfo.k1.push(item.divisionUserType);
              this.reprecInfo.k2.push(item.rpiNo);
              this.reprecInfo.k3.push(item.rpiName);
              this.reprecInfo.k4.push(this.reprecForm.divisionPattern);
              this.reprecForm.divisionRateList.push({
                value: item.divisionRate,
              });
              this.reprecForm.isChargeList.push({ value: item.isCharge });
            }
          }
        });
      } else {
        this.dialogType = "add";
        this.reprecForm.projectCode = row.projectCode;
        this.reprecForm.rpsNo = row.rpsNo;
      }
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    },
    divisionModeChange(val) {
      this.refreshReset();
      if (val == 1 || val == 2) {
        this.dpDisabled = true;
        this.reprecForm.divisionPattern = "1";
      } else if (val == 3) {
        this.dpDisabled = true;
        this.reprecForm.divisionPattern = "3";
      } else if (val == 4) {
        this.dpDisabled = true;
        this.reprecForm.divisionPattern = "4";
      } else {
        this.dpDisabled = false;
      }
    },
    isSelectChange(val, i) {
      for (const item of this.reprecForm.isChargeList) {
        item.value = 0;
      }
      this.reprecForm.isChargeList[i].value = val;
    },
    /* 新增分账方 */
    handleReprecAdd() {
      this.dialogChildVisible = true;
    },
    handleSubmit() {
      const _this = this;
      _this.$refs.form.validate((valid) => {
        if (valid) {
          if (_this.reprecForm.divisionMode == 2) {
            const divisionRateTotal = _this.reprecForm.divisionRateList.reduce(
              (acc, curr) => Number(acc) + Number(curr.value),
              0
            );
            if (divisionRateTotal !== 100) {
              _this.$message.warning("分账比例总和必须为100%");
              return;
            } else {
              // 清空绑定列表
              _this.reprecForm.bindList = [];
              // 直接遍历分账接收方数组，将每个接收方与对应的分账比例关联
              for (let index = 0; index < _this.reprecInfo.k2.length; index++) {
                _this.reprecForm.bindList.push({
                  rpiNo: _this.reprecInfo.k2[index],
                  divisionUserType: index === 0 ? 1 : 2, // 第一个为分账方，其余为接收方
                  divisionRate: _this.reprecForm.divisionRateList[index].value,
                  isCharge: _this.reprecForm.isChargeList[index].value,
                });
              }
              _this.$nextTick(() => {
                const loading = _this.$loading({
                  lock: true,
                  text: "提交中...",
                  spinner: "el-icon-loading",
                });
                add(_this.reprecForm)
                  .then(() => {
                    _this.$message.success("操作成功");
                    _this.dialogVisible = false;
                    _this.refreshReset();
                    _this.refreshChange();
                  })
                  .finally(() => {
                    loading.close();
                  });
              });
            }
          } else {
            _this.$nextTick(() => {
              const loading = _this.$loading({
                lock: true,
                text: "提交中...",
                spinner: "el-icon-loading",
              });
              add(_this.reprecForm)
                .then(() => {
                  _this.$message.success("操作成功");
                  _this.dialogVisible = false;
                  _this.refreshReset();
                  _this.refreshChange();
                })
                .finally(() => {
                  loading.close();
                });
            });
          }
        }
      });
    },
    handleClose(done) {
      this.$refs.form.resetFields();
      this.refreshReset();
      done();
    },
    refreshReset() {
      this.reprecInfo.k1 = [];
      this.reprecInfo.k2 = [];
      this.reprecInfo.k3 = [];
      this.reprecInfo.k4 = [];
      this.reprecForm.divisionRateList = [];
      this.reprecForm.isChargeList = [];
    },
    handleChildSubmit() {
      if (this.$refs["receiveTable"].selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      } else {
        let list = this.$refs["receiveTable"].selectionList;

        // 如果已有分账接收方，需要过滤掉重复的
        if (this.reprecInfo.k2.length > 0) {
          // 获取已存在的分账接收方编号
          const existingRpiNos = new Set(this.reprecInfo.k2);

          // 过滤出不重复的分账接收方
          const newItems = list.filter(
            (item) => !existingRpiNos.has(item.rpiNo)
          );

          // 添加新的分账接收方
          for (const item of newItems) {
            this.reprecInfo.k1.push(2);
            this.reprecInfo.k2.push(item.rpiNo);
            this.reprecInfo.k3.push(item.rpiName);
            this.reprecInfo.k4.push(this.reprecForm.divisionPattern);
            this.reprecForm.divisionRateList.push({ value: null });
            this.reprecForm.isChargeList.push({ value: 0 });
          }
        } else {
          this.reprecInfo.k1.push(1);
          this.reprecInfo.k2.push(this.reprecInfo.data.rpiNo);
          this.reprecInfo.k3.push(this.reprecInfo.data.rpiName);
          this.reprecInfo.k4.push(this.reprecForm.divisionPattern);
          this.reprecForm.divisionRateList.push({ value: null });
          this.reprecForm.isChargeList.push({ value: 0 });
          // 如果没有已存在的分账接收方，直接添加所有选中的
          for (const item of list) {
            this.reprecInfo.k1.push(2);
            this.reprecInfo.k2.push(item.rpiNo);
            this.reprecInfo.k3.push(item.rpiName);
            this.reprecInfo.k4.push(this.reprecForm.divisionPattern);
            this.reprecForm.divisionRateList.push({ value: null });
            this.reprecForm.isChargeList.push({ value: 0 });
          }
        }

        this.$message({
          type: "success",
          message: "添加成功!",
        });
        this.dialogChildVisible = false;
      }
    },
    handleChildClose(done) {
      done();
    },
  },
};
</script>
<style lang="scss" scoped>
.alter-basic {
  display: grid;
  grid-template-columns: repeat(6, 16.66%);
  border: 1px solid #ebeef5;

  .alter-title {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
}

.row-alter {
  display: flex;
  flex-direction: column;
  &.alter-width-4x {
  }
  &:nth-child(n + 2) {
    border-left: 1px solid #ebeef5;
  }
}

.col-alter {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 60px;
  height: 60px;
  // margin-bottom: 6px;
  font-size: 13px;
  &:nth-child(2) {
    color: #3f4c6b;
    // font-weight: bold;
  }
  &:nth-child(n + 3) {
    border-top: 1px solid #ebeef5;
  }
  &.border-bottom {
    border-bottom: 1px solid #ebeef5;
    word-break: break-word;
    background-color: #fafafa;
  }
  &.margin-top {
    margin-top: 6px;
  }
  &.margin-bottom {
    margin-bottom: 6px;
  }
}
.cols div:first-child:before {
  margin-top: 6px;
}

/deep/ .el-form-item__error {
  padding-top: 0;
}
</style>